<script lang="ts" setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { GetData, PutDetailsRedact } from '@/api/modules/manor.ts'

// landingStatus
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref({
  id: '', // ID
  audioCoverPic: '', // 视频封面图
  photosArray: [] as string[], // 简介图
  audioUrl: '', // 视频地址
  audioWidth: '', // 视频宽度
  audioHeight: '', // 视频高度
  audioMarginTop: '', // 视频上边距
})

// 验证规则
// const rules = reactive({
//   landingName: [
//     { required: true, message: '请输入标题', trigger: 'blur' },
//   ],
//   landingType: [
//     { required: true, message: '请选择活动类型', trigger: 'blur' },
//   ],
// })

// 图片上传赋值
function handleUploadSuccess(key: string, url: string) {
  if (url) {
    // eslint-disable-next-line ts/ban-ts-comment
  // @ts-expect-error
    ruleForm.value[key] = url
  }
}

// 提交
async function SubmitData(formEl: FormInstance | undefined) {
  if (!formEl) {
    return
  }
  await formEl.validate((valid) => {
    if (valid) {
      // ruleForm.value.audioCoverPic = ''
      const params = {
        ...ruleForm.value,
      }
      PutDetailsRedact(params).then((res: any) => {
        if (res.statusCode === 200) {
          ElMessage.success('修改成功')
        }
        else {
          ElMessage.error(`修改失败。${res.errors}`)
        }
      })
    }
    else {
      // console.log('error submit!', fields)
      ElMessage.error('请检查表单')
    }
  })
}

onMounted(async () => {
  await GetData().then((res: any) => {
    if (res.statusCode === 200) {
      ruleForm.value = res.data
      // ruleForm.value.landingBg = res.data.landingBg.split(',')
    }
  })
})
</script>

<template>
  <div>
    <PageHeader title="庄园配置" />
    <ElForm ref="ruleFormRef" label-position="top" label-width="80px" :model="ruleForm">
      <PageMain title="">
        <ElRow :gutter="20">
          <ElCol :md="24">
            <ElFormItem label="简介图" prop="photosArray">
              <ImagesUpload :size="10" :max="40" :width="200" :url="ruleForm.photosArray" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频封面图" prop="audioCoverPic">
              <ImageUpload action="action" :size="1" :url="ruleForm.audioCoverPic" @on-success="(imgUrl: string) => handleUploadSuccess('audioCoverPic', imgUrl)" />
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频" prop="audioMarginTop">
              <video
                id="video"
                :src="ruleForm.audioUrl"

                controls muted
                width="400"
                controlsList="nodownload"
              >您的浏览器不支持 video。</video>
            </ElFormItem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频地址" prop="audioUrl">
              <el-input v-model="ruleForm.audioUrl" placeholder="请输入视频地址" />
            </elformitem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频宽度(rpx)" prop="audioWidth">
              <el-input v-model="ruleForm.audioWidth" style="width: 300px;" placeholder="请输入视频宽度(rpx)" />
            </elformitem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频高度(rpx)" prop="audioHeight">
              <el-input v-model="ruleForm.audioHeight" style="width: 300px;" placeholder="请输入视频高度(rpx)" />
            </elformitem>
          </ElCol>
          <ElCol :md="8">
            <ElFormItem label="视频距页面顶部的距离(rpx)" prop="audioMarginTop">
              <el-input v-model="ruleForm.audioMarginTop" style="width: 300px;" placeholder="请输入视频距页面顶部的距离" />
            </elformitem>
          </ElCol>
        </ElRow>
      </PageMain>
    </ElForm>
    <div style="height: 60px;" />
    <FixedActionBar>
      <ElButton type="primary" size="large" @click="SubmitData(ruleFormRef)">
        提交
      </ElButton>
    </FixedActionBar>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  display: block;
  width: 178px;
  height: 178px;
}

.avatar-uploader .el-upload {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  width: 100px;
  height: 100px;
  font-size: 28px;
  color: #8c939d;
  text-align: center;
}

.from-list {
  position: relative;
  left: 3%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-column-gap: 20px;
  width: 95%;
  padding: 20px 30px;
  background-color: white;

  >div {
    min-height: 60px;
  }
}
</style>
